<template>
    <section class="assessmentIndex">
        <el-card class="root">
            <div style="display: flex; " class="tableBgC">
                <span style="flex: 1;line-height: 100px">项目类别</span>
                <span style="flex: 6">
                    <div class="second" style="display: flex">
                        <span style="flex: 5;line-height: 100px">项目内容</span>
                        <span style="flex:1;line-height: 100px">得分</span>
                        <div class="village-score" @scroll="orderScroll">
                            <div class="actual-container">
                                <div v-for="grandItem in list[0].kpiTownQuotaVOS[0].kpiVillageQuotaVOS" style="width: 100px;display: inline-block;">
                                    <span>{{grandItem.districtName.replace(/支部/,'')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </span>
            </div>
            <div v-for="(item,index) in list" style="display: flex;margin-top: 30px;border: 1px solid red">
                <span style="flex: 1;">{{item.quotaName}}</span>
                <span style="flex: 6">
                    <el-row>
                        <div v-for="(subItem,subIndex) in item.kpiTownQuotaVOS" class="second" style="display: flex" >
                            <span style="flex: 5">
                                <el-col :span="21">
                                    <vs-textarea v-model="subItem.quotaName"></vs-textarea>
                                    <!--{{subItem.name}}&nbsp;-->
                                </el-col>
                                <el-col :span="3">
                                     <icon name="delete" scale="2" @click.native="delItem(index,subIndex)"></icon>
                                </el-col>
                            </span>
                            <span style="flex:1">
                                <vs-input class="inputx"  v-model="subItem.score"/>
                            </span>
                            <div class="village-score" @scroll="orderScroll">
                                <div class="actual-container">
                                    <div v-for="grandItem in subItem.kpiVillageQuotaVOS" style="width: 100px;display: inline-block;">
                                        <vs-input class="inputx"  v-model="grandItem.weight"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-row>
                    <el-row>
                         <el-button @click="addList(index)">添加</el-button>
                    </el-row>
                </span>
            </div>
            <el-button @click="submit()">提交</el-button>
        </el-card>
    </section>
</template>

<script>
    export default {
        name: "AssessmentIndex",
        data(){
            return{
                list:[

                ],

                kpiQuota :  {quotaName:'素能评价',parentQuotaId:'04',quotaId:'0401',
                    kpiTownQuotaVOS:[
                        {quotaName: '行政能力得分',
                            parentQuotaId: '0402',
                            parentQuotaName: '行政能力得分',
                            score: 1,
                            kpiVillageQuotaVOS:
                                [
                                    {districtName:'模拟',districtId:'-1',score:0,weight:1}
                                ]
                        }
                    ]
                },

                    list1 : [
                        {
                            quotaName: "基础知识",
                            parentQuotaId: "04",
                            quotaId: "0401",
                            kpiTownQuotas: [
                                {
                                    quotaName: '基础测试',
                                    parentQuotaId: '0401',
                                    parentQuotaName: '基础知识测试',
                                    score: 1,
                                    kpiVillageQuotas:
                                        [
                                            {districtName: '村1', districtId: '-1', score: 0, weight: 1}
                                        ]
                                },
                            ]
                        },
                        {
                            quotaName: "行政能力",
                            parentQuotaId: "04",
                            quotaId: "0402",
                            kpiTownQuotas: [
                                {
                                    quotaName: '行政能力得分',
                                    parentQuotaId: '0402',
                                    parentQuotaName: '行政能力得分',
                                    score: 1,
                                    kpiVillageQuotaS:
                                        [
                                            {districtName: '模拟', districtId: '-1', score: 0, weight: 1}
                                        ]
                                },
                            ]
                        }
                    ],


                districtList:['宝华村','和平村','宝华村1','和平村1','宝华村2','和平村2','宝华村3','和平村3','宝华村4','和平村4',],
                user:{},
                tempObj:{quotaName:'1',kpiTownQuotaVOS:[{parentQuotaName:'2',score:'10',kpiVillageQuotaVOS:[{districtName: '村', weight: '权重'},{districtName: '村', weight: '权重'},]}]}
            }
        },
        methods:{
            addList(index){
                console.log(index,"22");
                let tempCun = [];
                this.list[0].kpiTownQuotaVOS[0].kpiVillageQuotaVOS.forEach(item=>{
                    tempCun.push({districtName: '村', weight: '权重',districtId:item.districtId})
                });
                this.list[index].kpiTownQuotaVOS.push({parentQuotaName:'',score:0,kpiVillageQuotaVOS:tempCun})
            },
            delItem(index,subIndex){
                this.list[index].kpiTownQuotaVOS.splice(subIndex,1)
            },
            orderScroll(e) {
                let r = document.querySelectorAll('.village-score');
                r.forEach(item => {
                    item.scrollLeft =  e.target.scrollLeft;
                })
            },
            showData(){
                this.$http('get',`identity/kPITownQuota/getAll/0109/01`,false).then(data=>{
                    this.list = [];
                    this.list = data;
                })
            },
            submit(){
                this.$http('post',`identity/kPITownQuota/`,this.kpiQuota,false).then(data=>{

                })
                console.log(this.list,"jjj")
            }
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            this.showData();
        }
    }
</script>

<style>
    .assessmentIndex .vs-input--input{
        width: 100px!important;
        height: 50px;
    }
    .assessmentIndex .vs-con-input-label{
        width: 100px!important;
    }
</style>

<style scoped>
    .assessmentIndex {
        width:95%;
        margin: 20px;
    }
    span {
        /*  border: 1px red solid;*/
        vertical-align: top;
    }
    .village-score {
        width: 600px;display: inline-block;overflow-x: hidden;
    }
    .actual-container {
        width: 1200px;
    }
    .root:last-child :last-child :last-child :last-child :last-child :last-child  {
        overflow-x: scroll;
    }
    .assessmentIndex .root .tableBgC{
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        border-radius:10px 10px 0px 0px;
        /* height: 100px;*/
        font-weight: bold;
        font-size: 20px;
    }
</style>
